<template>
  <div class="screen-config">
    <el-tabs v-model="activeTab" class="config-tabs">
      <!-- 配置Tab -->
      <el-tab-pane label="配置" name="config">
        <div class="config-content">
          <!-- 组件配置 -->
          <div v-if="selectedComponent" class="component-config-wrapper">
            <div class="config-header">
              <h3 class="config-title">{{ selectedComponent.name || '组件配置' }}</h3>
            </div>
            <el-tabs v-model="activeCompTab" class="inner-config-tabs">
              <el-tab-pane label="基础" name="basic">
                <div class="config-section">
                  <el-form-item label="ID"><el-input :value="selectedComponent.id" disabled /></el-form-item>
                  <el-form-item label="组件名"><el-input v-model="selectedComponent.name" @change="handleComponentUpdate" /></el-form-item>
                </div>
                <div class="config-section">
                   <h4 class="section-title">位置和尺寸</h4>
                   <el-row :gutter="12">
                     <el-col :span="12"><el-form-item label="宽度"><el-input-number v-model="selectedComponent.style.width" @change="handleComponentUpdate" /></el-form-item></el-col>
                     <el-col :span="12"><el-form-item label="高度"><el-input-number v-model="selectedComponent.style.height" @change="handleComponentUpdate" /></el-form-item></el-col>
                   </el-row>
                   <el-row :gutter="12">
                     <el-col :span="12"><el-form-item label="X坐标"><el-input-number v-model="selectedComponent.style.left" @change="handleComponentUpdate" /></el-form-item></el-col>
                     <el-col :span="12"><el-form-item label="Y坐标"><el-input-number v-model="selectedComponent.style.top" @change="handleComponentUpdate" /></el-form-item></el-col>
                   </el-row>
                </div>
                <div class="config-section">
                  <h4 class="section-title">基础样式</h4>
                  <el-form-item label="旋转角度"><el-slider v-model="selectedComponent.style.rotate" :min="-180" :max="180" @change="handleComponentUpdate" /></el-form-item>
                </div>
              </el-tab-pane>
              <el-tab-pane label="属性" name="props">
                <component-config :component="selectedComponent" @update="handleComponentUpdate" />
              </el-tab-pane>
              <el-tab-pane label="交互" name="interaction">
                <div class="interaction-placeholder">
                  <el-icon><Pointer /></el-icon>
                  <span>交互功能开发中</span>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <!-- 页面配置 -->
          <div v-else class="page-config-wrapper">
            <div class="config-header">
              <h3 class="config-title">大屏配置</h3>
            </div>
             <div class="config-section">
              <div class="form-item">
                <label>页面标题</label>
                <el-input v-model="pageConfig.title" @input="$emit('update:page', pageConfig)" />
              </div>
              <div class="form-item">
                <label>页面尺寸</label>
                <div class="size-inputs">
                  <el-input-number v-model="pageConfig.width" @change="$emit('update:page', pageConfig)" />
                  <span class="size-separator">×</span>
                  <el-input-number v-model="pageConfig.height" @change="$emit('update:page', pageConfig)" />
                </div>
              </div>
              <div class="form-item">
                <label>背景颜色</label>
                <el-color-picker v-model="pageConfig.backgroundColor" @change="$emit('update:page', pageConfig)" show-alpha />
              </div>
              <div class="form-item">
                <label>背景图片</label>
                 <el-upload class="background-upload" ref="uploadRef" action="#" :auto-upload="false" :show-file-list="false" accept="image/*" @change="handleBackgroundUpload">
                   <div v-if="pageConfig.backgroundImage" class="background-preview">
                    <img :src="pageConfig.backgroundImage" alt="背景预览" />
                    <div class="preview-actions">
                       <el-button-group>
                         <el-button type="primary" :icon="Upload" @click.stop="triggerUpload" />
                         <el-button type="danger" :icon="Delete" @click.stop="clearBackground" />
                       </el-button-group>
                    </div>
                   </div>
                   <div v-else class="upload-box">
                     <el-icon><Plus /></el-icon>
                     <span>上传图片</span>
                   </div>
                </el-upload>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>

      <!-- 图层Tab -->
      <el-tab-pane label="图层" name="layers">
        <LayerPanel
          :layers="layers"
          :selected-component-id="selectedComponent?.id"
          @select-layer="$emit('select-layer', $event)"
          @toggle-visibility="$emit('toggle-visibility', $event)"
          @delete-layer="$emit('delete-layer', $event)"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, watch, defineProps, defineEmits } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Upload,
  Delete,
  Pointer,
  Plus
} from '@element-plus/icons-vue'
import ComponentConfig from './ComponentConfig.vue'
import LayerPanel from './LayerPanel.vue'

const props = defineProps({
  pageConfig: { type: Object, required: true },
  selectedComponent: { type: Object, default: null },
  layers: { type: Array, default: () => [] }
})

const emit = defineEmits([
  'update:page', 
  'update:component', 
  'select-layer',
  'toggle-visibility',
  'delete-layer'
])

const activeTab = ref('config')
const activeCompTab = ref('basic')
const uploadRef = ref(null)

watch(() => props.selectedComponent, (newVal) => {
  if (newVal) {
    activeTab.value = 'config'
    activeCompTab.value = 'basic'
  }
})

const handleComponentUpdate = () => {
  if (props.selectedComponent) {
    emit('update:component', props.selectedComponent)
  }
}

const handleBackgroundUpload = async (file) => {
  try {
    const base64 = await new Promise((resolve, reject) => {
      const reader = new FileReader()
      reader.onload = (e) => resolve(e.target.result)
      reader.onerror = (err) => reject(err)
      reader.readAsDataURL(file.raw)
    })
    emit('update:page', { ...props.pageConfig, backgroundImage: base64 })
    ElMessage.success('背景图片上传成功')
  } catch (error) {
    ElMessage.error('上传失败')
  }
}

const triggerUpload = () => {
  uploadRef.value?.$el.querySelector('input').click()
}

const clearBackground = () => {
  emit('update:page', { ...props.pageConfig, backgroundImage: '' })
}
</script>

<style scoped>
.screen-config {
  width: 320px;
  height: 100%;
  background: #202124;
  border-left: 1px solid #3a3b3d;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.config-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

:deep(.el-tabs__header) {
  margin: 0;
  padding: 0 20px;
  background: #202124;
  border-bottom: 1px solid #3a3b3d;
  flex-shrink: 0;
}

:deep(.el-tabs__item) {
  color: #a9a9a9;
}
:deep(.el-tabs__item.is-active) {
  color: #fff;
}
:deep(.el-tabs__active-bar) {
  background-color: #409eff;
}

:deep(.el-tabs__content) {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.config-content {
  height: 100%;
}

.page-config-wrapper, .component-config-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.config-header {
  padding: 16px 20px;
  border-bottom: 1px solid #3a3b3d;
  flex-shrink: 0;
}
.config-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #e5e5e5;
}

.inner-config-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.inner-config-tabs :deep(.el-tabs__content) {
  padding: 20px;
}

.config-section {
  margin-bottom: 24px;
}
.section-title {
  font-size: 14px;
  font-weight: 600;
  color: #e5e5e5;
  margin-bottom: 16px;
}

.form-item {
  margin-bottom: 16px;
}
.form-item label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #a9a9a9;
}
.size-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}
.size-separator {
  color: #a9a9a9;
}

.background-upload {
  width: 100%;
}
.upload-box {
  width: 100%;
  height: 120px;
  border: 1px dashed #3a3b3d;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #a9a9a9;
  cursor: pointer;
  transition: border-color 0.2s;
}
.upload-box:hover {
  border-color: #409eff;
}
.upload-box .el-icon {
  font-size: 24px;
  margin-bottom: 8px;
}
.background-preview {
  width: 100%;
  height: 120px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.background-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.preview-actions {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.background-preview:hover .preview-actions {
  opacity: 1;
}

.interaction-placeholder {
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #666;
}
.interaction-placeholder .el-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

/* 滚动条 */
:deep(.el-tabs__content)::-webkit-scrollbar { width: 6px; }
:deep(.el-tabs__content)::-webkit-scrollbar-thumb { background: #3a3b3d; border-radius: 3px; }
:deep(.el-tabs__content)::-webkit-scrollbar-track { background: transparent; }
</style> 